<!-- 示例核心代码(3/3) -->
<template>
    <el-dialog class="ba-operate-dialog" v-model="baTable.table.extend!.showInfo" width="50%">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">详情</div>
        </template>

        <el-scrollbar  class="ba-table-form-scrollbar">

        <div v-loading="baTable.table.extend!.infoLoading" class="info-box ba-markdown">
            <div v-if="baTable.table.extend!.infoData">


                <el-steps style="max-width: 100%;margin-bottom: 15px;margin-top: -25px;" :active="baTable.table.extend!.infoData.step_num" align-center  finish-status="success" >
                    <el-step v-for="(item, index) in baTable.table.extend!.infoData.step_array"  :title="item.title"  />
                </el-steps>

                <el-descriptions
                    :column="2"
                    border
                >

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                订单号
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.order_no}}
                    </el-descriptions-item>
<!--                    <el-descriptions-item>-->
<!--                        <template #label>-->
<!--                            <div class="cell-item">-->
<!--                                支付单号-->
<!--                            </div>-->
<!--                        </template>-->
<!--                        {{baTable.table.extend!.infoData.pay_order_no}}-->
<!--                    </el-descriptions-item>-->

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                类型
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.order_type == 1 ? '普通' : '团购'}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                课程名称
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                课程类型
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.course_type == 1 ? '课程' : '体验课'}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                教练姓名
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.coach.name}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                销售姓名
                            </div>
                        </template>
                        {{baTable.table.extend?.infoData?.market?.name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                门店名称
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.shop.name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                订单金额
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.order_money}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                课程售价
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.price}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                数量
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.num}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                会员优惠
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.vip_price}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                支付金额
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.pay_money}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                创建时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.create_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                支付时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.pay_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                使用时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.use_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                确认时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.confirm_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                考勤上传时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.attendance_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                取消时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.cancel_time}}
                    </el-descriptions-item>
<!--                    <el-descriptions-item>-->
<!--                        <template #label>-->
<!--                            <div class="cell-item">-->
<!--                                用户备注-->
<!--                            </div>-->
<!--                        </template>-->
<!--                        {{baTable.table.extend!.infoData.user_remark}}-->
<!--                    </el-descriptions-item>-->




                    <el-descriptions-item v-if="baTable.table.extend!.infoData.sub_after_time">
                        <template #label>
                            <div class="cell-item">
                                售后申请时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.sub_after_time}}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="baTable.table.extend!.infoData.after_reason">
                        <template #label>
                            <div class="cell-item">
                                售后理由
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.after_reason}}
                    </el-descriptions-item>

                    <el-descriptions-item v-if="baTable.table.extend!.infoData.after_images">
                        <template #label>
                            <div class="cell-item">
                                售后凭证
                            </div>
                        </template>

                        <el-image v-for="(v,i) in  baTable.table.extend!.infoData.after_images"
                                  style="width: 50px; height: 50px"
                                  :src="baTable.table.extend!.infoData.after_images[i]"
                                  :zoom-rate="1.2"
                                  :max-scale="7"
                                  :min-scale="0.2"
                                  :preview-src-list="baTable.table.extend!.infoData.after_images"
                                  :initial-index="i"
                                  fit="cover"
                        />

                    </el-descriptions-item>

                    <el-descriptions-item v-if="baTable.table.extend!.infoData.after_status >= 2">
                        <template #label>
                            <div class="cell-item">
                                审核状态
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.after_status == 2 ? '通过' : '驳回'}}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="baTable.table.extend!.infoData.after_check_time">
                        <template #label>
                            <div class="cell-item">
                                审核时间
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.after_check_time}}
                    </el-descriptions-item>

                    <el-descriptions-item v-if="baTable.table.extend!.infoData.reject_reason">
                        <template #label>
                            <div class="cell-item">
                                驳回理由
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.reject_reason}}
                    </el-descriptions-item>

                    <el-descriptions-item v-if="baTable.table.extend!.infoData.refund_money">
                        <template #label>
                            <div class="cell-item">
                                退款金额
                            </div>
                        </template>
                        {{baTable.table.extend!.infoData.refund_money}}
                    </el-descriptions-item>



                </el-descriptions>




            </div>
        </div>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { timeFormat } from '/@/utils/common'
import type baTableClass from '/@/utils/baTable'

const baTable = inject('baTable') as baTableClass
</script>

<style scoped lang="scss">
.info-box {
    margin-top: 60px;
    div {
        width: 100%;
        text-align: center;
    }
    .mt-40 {
        margin-top: 40px;
    }
}
:deep(.ba-markdown table tr:hover){
    background-color: inherit ;
}
</style>
